<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .container {
            width: 100%;
            height: 700px;
            background: url(img/bg_page1.jpg) 0 0 / 100% 100%;
        }

        .nav {
            width: 1000px;
            height: 100px;
            margin: 0px auto;
        }

        .demo {
            width: 200px;
            height: 47px;
            background: url(img/logo.png) 0 0 / 100% 100%;
            float: left;
            margin-top: 30px;
        }

        .shouye {
            width: 700px;
            height: 100px;
            float: right;
            display: flex;
            justify-content: space-between;
        }

        .shouye li {
            width: 90px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 14px;
            font-weight: bold;
            color: white;
            z-index: 99;
        }

        .xiaoewm {
            width: 20px;
            height: 20px;
            background: black;
            float: left;
            position: relative;
            top: 40px;
            background: url(img/icon_qr.png) 0 0 / 100% 100%;
        }

        .sanjiao {
            width: 10px;
            height: 7px;
            background: url(img/arrow_down.png) 0 0 / 100% 100%;
            float: left;
            position: relative;
            top: 45px;
            left: 60px;
        }

        .erweima {
            width: 90px;
            height: 140px;
            background: rgba(0, 0, 0, 0.5);
            position: relative;
            top: -80px;
            display: none;

        }

        .daewm {
            width: 80px;
            height: 90px;
            background: url(img/qrcode.png) 0 0 / 100% 100%;
            position: relative;
            top: 50px;
            left: 5px;
            display: none;
        }

        .shouye li:hover {
            cursor: pointer;
        }

        .dadada:hover .erweima,
        .daewm {
            display: block;
        }

        .liubianxing {
            width: 160px;
            height: 270px;
            margin: 50px auto;

        }

        .zhong {
            width: 150px;
            height: 160px;
            background: url(img/zhong.png) 0 0 / 100% 100%;
            float: left;
            animation: zhong 1.5s linear;
        }

        @keyframes zhong {
            from {
                transform: translateY(-60px);

            }
            to {
                transform: translateY(10px);

            }
        }

        .you {
            width: 150px;
            height: 160px;
            background: url(img/you.png) 0 0 / 100% 100%;
            float: left;
            margin-top: -80px;
            animation: you 1.5s linear;
        }

        @keyframes you {
            from {
                transform: translateY(10px);

            }
            to {
                transform: translateY(-60px);

            }
        }

        .xia {
            width: 80px;
            height: 80px;
            background: url(img/jiantou.png) 0 0 / 100% 100%;
            position: relative;
            top: 40px;
            left: 35px;
        }

        .star {
            float: left;
            width: 8px;
            height: 8px;
            background: url(img/dian.png)no-repeat 0 0 / 100% 100%;
            position: relative;
            top: -60px;
            left: -60px;

            animation: star 0.5s both infinite linear;
            z-index: 999;
        }

        @keyframes star {
            from {

                transform: translateY(0px);
                opacity: 1
            }

            to {
                transform: translateY(-60px);
                opacity: 0;
            }
        }

        .star1 {
            float: left;
            width: 8px;
            height: 8px;
            background: url(img/dian.png)no-repeat 0 0 / 100% 100%;
            position: relative;
            top: -60px;
            left: -80px;

            animation: star1 1s both infinite linear;
            z-index: 999;
        }

        @keyframes star1 {
            from {

                transform: translateY(0px);
                opacity: 1
            }

            to {
                transform: translateY(-60px);
                opacity: 0;
            }
        }

        .star2 {
            float: left;
            width: 8px;
            height: 8px;
            background: url(img/dian.png)no-repeat 0 0 / 100% 100%;
            position: relative;
            top: -70px;
            left: -90px;

            animation: star2 0.5s both infinite linear;
            z-index: 999;
        }

        @keyframes star2 {
            from {

                transform: translateY(0px);
                opacity: 1
            }

            to {
                transform: translateY(-60px);
                opacity: 0;
            }
        }

        .star3 {
            float: left;
            width: 8px;
            height: 8px;
            background: url(img/dian.png)no-repeat 0 0 / 100% 100%;
            position: relative;
            top: -80px;
            left: -110px;

            animation: star3 1.5s both infinite linear;
            z-index: 999;
        }

        @keyframes star3 {
            from {

                transform: translateY(0px);
                opacity: 1
            }

            to {
                transform: translateY(-60px);
                opacity: 0;
            }
        }

        .xiazai {
            width: 700px;
            height: 265px;
            margin: 0 auto;
        }

        .zhushou {
            width: 700px;
            height: 165px;
            background: url(img/zhushou.png) 0 0 / 100% 100%;
        }

        .shouji {
            width: 190px;
            height: 45px;
            background: url(img/shouji.png) 0 0 / 100% 100%;
            position: relative;
            top: 10px;
            left: 150px;
        }

        .diannao {
            width: 190px;
            height: 45px;
            background: url(img/diannao.png) 0 0 / 100% 100%;
            position: relative;
            top: -35px;
            left: 360px;
        }

        .shouji,
        .diannao:hover {
            cursor: pointer;
        }

        .ren {
            width: 100%;
            height: 700px;

        }

        .main {
            width: 714px;
            height: 209px;
            position: relative;
            left: calc(50% - 350px);
            top: 250px;
            background: url(img/beijing.png) 0 0 / 100% 100%;
        }

        .main1 {
            width: 647px;
            height: 249px;
            position: relative;
            left: calc(50% - 350px);
            top: 250px;
            background: url(img/tiankong.png) 0 0 / 100% 100%;
        }

        .main2 {
            width: 713px;
            height: 294px;
            position: relative;
            left: calc(50% - 350px);
            top: 250px;
            background: url(img/zhuozi.png) 0 0 / 100% 100%;
        }

        .main3 {
            width: 689px;
            height: 266px;
            background: url(img/shitou.png) 0 0 / 100% 100%;
            position: relative;
            left: calc(50% - 350px);
            top: 250px;
        }

        .xiaoren {
            width: 355px;
            height: 165px;
            background: url(img/nvren.png) 0 0 / 100% 100%;
            position: relative;
            left: 450px;
            top: 120px;
        }

        .xiaoren1 {
            width: 404px;
            height: 181px;
            background: url(img/shabi.png) 0 0 / 100% 100%;
            position: relative;
            left: 360px;
            top: 10px;
        }

        .xiaoren2 {
            width: 34px;
            height: 8px;
            background: url(img/shouzhi.png) 0 0 / 100% 100%;
            position: relative;
            left: 640px;
            top: 70px;
        }

        .tui {
            width: 135px;
            height: 97px;
            background: url(img/datui.png) 0 0 / 100% 100%;
            position: relative;
            left: 660px;
            top: 50px;
            animation-delay: .1s;
            animation: footMove 3s ease-in 0s infinite;
            transform-origin: 3px 3px;
        }

        @keyframes footMove {
            0% {
                transform: rotate(0deg) translateZ(0);
            }
            30% {
                transform: rotate(-5deg) translateZ(0);
            }
            60% {
                transform: roate(10deg) translateZ(0);
            }
            100% {
                transform: rotate(0) translateZ(0);
            }
        }

        .guaishou {
            width: 27px;
            height: 28px;
            background: url(img/guaishou.png) 0 0 / 100% 100%;
            position: relative;
            left: 660px;
            top: -170px;

        }

        .guaishou1 {
            width: 96px;
            height: 70px;
            background: url(img/diqiu.png) 0 0 / 100% 100%;
            position: relative;
            left: 580px;
            top: -230px;

        }

        .guaishou2 {
            width: 25px;
            height: 15px;
            background: url(img/jiao.png) 0 0 / 100% 100%;
            position: relative;
            left: 685px;
            top: 215px;
        }

        .guaishou3 {
            width: 221px;
            height: 217px;
            background: url(img/shadiao.png) 0 0 / 100% 100%;
            position: relative;
            left: 405px;
            top: 15px;
        }

        .dong3 {
            animation: footer 2s ease-in infinite;
        }

        @keyframes footer {
            0% {
                transform: rotate(0) translateZ(0);
            }
            50% {
                transform: rotate(-10deg) translateZ(0);
            }
            100% {
                transform: rotate(0) translateZ(0);
            }
        }

        .yinyue {
            width: 27px;
            height: 30px;
            background: url(img/yinyue.png) 0 0 / 100% 100%;
            position: relative;
            left: 680px;
            top: -130px;
        }

        .yinyue1 {
            width: 99px;
            height: 70px;
            background: url(img/xiaodiqiu.png) 0 0 / 100% 100%;
            position: relative;
            left: 380px;
            top: -60px;
        }

        .yinyue2 {
            width: 36px;
            height: 30px;
            background: url(img/pen.png) 0 0 / 100% 100%;
            position: relative;
            left: 730px;
            top: 190px;
        }

        .yinyue3 {
            width: 100px;
            height: 141px;
            background: url(img/shoudian.png) 0 0 / 100% 100%;
            position: relative;
            left: 610px;
            top: -162px;
        }

        .dong4 {
            animation: diantong 2s ease-in infinite;
        }

        @keyframes diantong {
            0% {
                transform: rotate(0) translateZ(0);
            }
            33.3% {
                transform: rotate(3deg) translateZ(0);
            }
            66.6% {
                transform: rotate(-3deg) translateZ(0);
            }
            100% {
                transform: rotate(0) translateZ(0);
            }
        }

        .dun {
            width: 17px;
            height: 19px;
            background: url(img/dun.png) 0 0 / 100% 100%;
            position: relative;
            left: 600px;
            top: -200px;
        }

        .dun1 {
            width: 90px;
            height: 60px;
            background: url(img/huangqiu.png) 0 0 / 100% 100%;
            position: relative;
            left: 770px;
            top: -180px;
        }

        .dun2 {
            width: 30px;
            height: 37px;
            left: 460px;
            top: 320px;
            background: url(img/zuoyezi.png) 0 0 / 100% 100%;
            transform-origin: 50% 100%;
            animation: flower 3s ease-in infinite;
            animation-delay: .2s;
            position: relative;
            top: 125px;
            left: 710px;
        }

        .dun3 {
            width: 30px;
            height: 59px;
            left: 503px;
            top: 312px;
            transform-origin: 50% 100%;
            animation: flower 3s ease-in infinite;
            animation-delay: .6s;
            background: url(img/zhongyezi.png) 0 0 / 100% 100%;
            position: relative;
            top: 70px;
            left: 730px;
        }

        .dun4 {
            width: 30px;
            height: 59px;
            left: 503px;
            top: 312px;
            transform-origin: 50% 100%;
            animation: flower 3s ease-in infinite;
            animation-delay: .6s;
            background: url(img/youyezi.png) 0 0 / 100% 100%;
            position: relative;
            top: 10px;
            left: 760px;
        }



        @keyframes flower {
            0% {
                transform: rotate(0) translateZ(0);
            }
            33.3% {
                transform: rotate(-3deg) translateZ(0);
            }
            66.6% {
                transform: rotate(3deg) translateZ(0);
            }
            100% {
                transform: rotate(0) translateZ(0);
            }

        }

        .xinxi {
            width: 23px;
            height: 22px;
            background: url(img/xinxi.png) 0 0 / 100% 100%;
            position: relative;
            left: 560px;
            top: -250px;
        }

        .zhi {
            width: 78px;
            height: 64px;
            background: url(img/zhi.png) 0 0 / 100% 100%;
            position: relative;
            left: 370px;
            top: -250px;
        }

        .dong {
            animation: appMoveRandom 3s ease-in 0s infinite;
        }

        @keyframes appMoveRandom {
            0% {
                transform: translate(0) translateZ(0);
            }
            30% {
                transform: translate(3px, -2px) translateZ(0);
            }

            60% {
                transform: translate(4px, 3px) translateZ(0);
            }
            100% {
                transform: translate(0) translateZ(0);
            }
        }

        .dong1 {
            animation: ani 1s ease-in infinite;
        }

        @keyframes ani {
            0% {
                transform: rotate(10deg) translateZ(0);
            }

            50% {
                transform: rotate(-15deg) translateZ(0);
            }
            100% {
                transform: rotate(10deg) translateZ(0);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="nav">
            <div class="demo"></div>
            <ul class="shouye">
                <li>首页</li>
                <li>市场应用</li>
                <li>更新日志</li>
                <li>开放平台</li>
                <li>运营平台</li>
                <li>论坛</li>
                <li class="dadada">
                    <div class="xiaoewm"></div>
                    APP
                    <div class="sanjiao"></div>
                    <div class="erweima">
                        <div class="daewm"></div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="liubianxing">
            <div class="zhong"></div>
            <div class="you"></div>
            <div class="xia"></div>
            <div class="star"></div>
            <div class="star1"></div>
            <div class="star2"></div>
            <div class="star3"></div>
        </div>
        <div class="xiazai">
            <div class="zhushou"></div>
            <div class="shouji"></div>
            <div class="diannao"></div>
        </div>
    </div>
    <div class="ren">
        <div class="main"></div>
        <div class="xiaoren"></div>
        <div class="tui"></div>
        <div class="guaishou dong"></div>
        <div class="yinyue dong"></div>
        <div class="dun dong"></div>
        <div class="xinxi dong"></div>
        <div class="zhi dong"> </div>
    </div>
    <div class="ren">
        <div class="main1"></div>
        <div class="xiaoren1 dong"></div>

        <div class="guaishou1 dong"></div>
        <div class="yinyue1 dong"></div>
        <div class="dun1 dong"></div>

    </div>
    <div class="ren">
        <div class="main2"></div>
        <div class="xiaoren2 dong1"></div>

        <div class="guaishou2 dong3"></div>
        <div class="yinyue2 "></div>
        <div class="dun2 dong4"></div>
        <div class="dun3 dong5"></div>
        <div class="dun4 dong6"></div>

    </div>
    <div class="ren">
        <div class="main3"></div>
        <div class="xiaoren3 dong1"></div>

        <div class="guaishou3 "></div>
        <div class="yinyue3 dong4"></div>


    </div>
</body>

</html>